<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="findNearestMarker,addClickEventListenerToMap" />
  <title>HERE Maps API Example: Finding the Nearest Marker</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="afterHereMapLoad" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Finding the Nearest Marker</h1>
  <p>Click anywhere on the Map to find out which of the five Markers is
  the nearest to that spot. You can also drag and drop any Marker to a new
   position.</p>
  <p>The nearest marker is: <span id="nearestMarker">*None*</span></p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="marker,events" type="text/javascript" >
//<![CDATA[
var map;

function findNearestMarker(coords) {
  var minDist = 1000,
    nearest_text = '*None*',
    markerDist,
    len = map.objects.getLength(),
    i;

  for (i = 0; i < len; i += 1) {
    if (map.objects.get(i) instanceof nokia.maps.map.StandardMarker) {
      markerDist = map.objects.get(i).coordinate.distance(coords);
      if (markerDist < minDist) {
        minDist = markerDist;
        nearest_text = map.objects.get(i).text;
      }
    }
  }

  $("#nearestMarker").text(nearest_text);
}

function addClickEventListenerToMap(map) {
  var TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click';
  map.addListener(CLICK, function (evt) {
    var coords = map.pixelToGeo(evt.targetX, evt.targetY);
    findNearestMarker(coords);
  }, false);
}

function afterHereMapLoad(theMap) {
  map = theMap;
  map.setCenter([60.1697768639186, 24.82923586371288]);
  map.setZoomLevel(16);
  map.set('baseMapType', map.SATELLITE);
  // Set up five markers.
  var coords = [[60.1697768639186, 24.82923586371288],
    [60.170497332447866, 24.828592133548653 ],
    [60.17093227431904, 24.827707004572943 ],
    [60.170057048001865, 24.826505374933163 ],
    [60.170025027084705, 24.82839365008141]];

  $.each(coords , function (index, value) {
    map.objects.add(
      new nokia.maps.map.StandardMarker(value, {
        text: (index + 1),
        draggable: true
      })
    );
  });
  // Add the click event listener.
  addClickEventListenerToMap(map);
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>